<script setup lang="ts">
import { EnumOpType } from "@renderer/assets/types";
import GroupBtnWithDropdown from "@renderer/view/components/components/GroupBtnWithDropdown.vue";
import {ref} from 'vue'
const syncSettingsMenu = [
  {
    label: '同步平移',
    value: 'syncPan'
  },
  {
    label: '同步缩放',
    value: 'syncZoom'
  },
  {
    label: '同步调窗',
    value: 'syncWindow'
  },
];

const syncSettingsRef = ref(
  {
    syncPan:false,
    syncZoom:true,
    syncWindow:true,
  })
</script>

<template>
  <group-btn-with-dropdown
    tips="窗口同步"
    :op-type="{
      type: EnumOpType.syncView,
      subType: ''
    }"
    :disabled="true"
    icon="mdi-link-variant">
    <template #dropdownSlot>
      <v-card >
        <v-card-text>
          <template    v-for="item in syncSettingsMenu">
            <v-checkbox
              density="compact"
              :hide-details="true"
              v-model="syncSettingsRef[item.value]"
              :label="item.label"
            >
            </v-checkbox>
          </template>

        </v-card-text>
      </v-card>
    </template>
  </group-btn-with-dropdown>
</template>

<style scoped>

</style>
